<template>
  <div class="meal-plan">
    <van-nav-bar title="饮食" left-text="返回" left-arrow @click-left="$router.back()" />
    <van-search placeholder="输入关键字查找..." />
  </div>
  <div class="text">
    <h4>早餐</h4>
    <h4 @click="fne">定制</h4>
  </div>
  <div class="meal-items">
    <div class="meal-card selected">
      <img src="../../public/OIP-C.jpg" alt="沙拉" />
      <div class="meal-info">
        <p>沙拉</p>
        <p>443 cals</p>
      </div>
    </div>
    <div class="meal-card">
      <img src="../../public/OIPvv-C.jpg" alt="苹果" />
      <div class="meal-info">
        <p>苹果</p>
        <p>260 cals</p>
      </div>
    </div>
    <div class="meal-card">
      <img src="../../public/OIPb-C.jpg" alt="牛奶" />
      <div class="meal-info">
        <p>牛奶</p>
        <p>110 cals</p>
      </div>
    </div>
  </div>
  <div class="text">
    <h4>午餐</h4>
    <h4>定制</h4>
  </div>
  <div class="meal-items">
    <div class="meal-card selected">
      <img src="../../public/OIP-C.jpg" alt="沙拉" />
      <div class="meal-info">
        <p>沙拉</p>
        <p>443 cals</p>
      </div>
    </div>
    <div class="meal-card">
      <img src="../../public/OIPvv-C.jpg" alt="苹果" />
      <div class="meal-info">
        <p>苹果</p>
        <p>260 cals</p>
      </div>
    </div>
    <div class="meal-card">
      <img src="../../public/meane.jpg" alt="鸡蛋" />
      <div class="meal-info">
        <p>牛奶</p>
        <p>110 cals</p>
      </div>
    </div>
  </div>
  <div>
    <div>
      <van-popup v-model:show="show" position="bottom" :style="{ height: '90%' }" closeable>
        <div class="food-preference">
          <h2>您的食物偏好是什么？</h2>
          <div class="ooo">
            <van-cell
              class="yyy"
              v-for="(option, index) in options"
              :key="index"
              :title="option"
              :class="{ selected: selectedOption === option }"
              @click="selectOption(option)"
            />
          </div>
          <van-button type="primary" @click="$router.push('/apple')" class="submit-button"
            >下一步</van-button
          >
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(false)
const options = [
  '我是素食主义者',
  '我只吃蔬菜水果',
  '我是素食注意者，但我吃鱼',
  '我没有任何特定的偏好',
]

const selectedOption = ref(null)

function selectOption(option) {
  selectedOption.value = option
}

function fne() {
  show.value = ref(true)
}
function nnm() {
  options
}
nnm()
</script>
<style  scoped lang="css">
.text {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin-left: 19px;
}
.meal-plan {
  padding: 20px;
}

.meal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.customize {
  color: purple;
  cursor: pointer;
}

.meal-items {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.meal-card {
  background-color: #f2f2f2;
  border-radius: 30px;
  padding: 10px;
  text-align: center;
  width: 80px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  height: 150px;
  margin: 0px 5px 0px 5px;
}

.meal-card:hover {
  transform: translateY(-5px);
}

.meal-card.selected {
  background-color: pink;
}
.meal-info {
  padding: 0px 8px 0px 8px;
}
.meal-card img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.meal-info p {
  margin: 0;
  font-size: 14px;
}
.food-preference {
  padding: 20px;
}

.option {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.option:hover {
  background-color: #f5f5f5;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  margin-right: 10px;
  transition: background-color 0.3s;
}

.selected {
  background-color: #4caf50; /* 选中颜色 */
  color: white;
}

.submit-button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: rgb(109, 93, 210);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 84%;
  margin-left: 20px;
}
.submit-button:hover {
  background-color: #0056b3;
}
.yyy {
  height: 70px;
  border-radius: 10px;
  margin-top: 30px;
  line-height: 50px;
  font-size: 16px;
  width: 90%;
}
.ooo {
  margin-left: 20px;
}
.van-popup {
  background-color: rgb(246, 246, 248);
}
</style>
